<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <th:block th:include="include :: header('文档查看')"/>
        <th:block th:include="include :: swiper-css"/>
        <style>
            .pdf-div {
                width: 1000px;
                margin: auto;
            }

            .adds{
                line-height: 2em;
                padding: 4px;
                text-align: center;
                font-weight: bold;
            }

            .media embed {
                -webkit-transform: translate(30px, -50px);
                transform: translate(30px, -50px);
                width: 900px;
                height: 100%;
            }

            .carousel .item img {
                width: 100%;
            }

            .swiper-container {
                width: 100%;
                height: auto;
            }
            .swiper-slide img{
                width: 100%;
                height: auto;
            }

            .swiper-button-prev,.swiper-button-next{

            }

            .pageNum{
                font-weight: bold;
                font-size: 20px;
                color: red;
                position: absolute;
                bottom: -25px;
                z-index: 10;
                padding-top: 29px;
                padding-bottom: 20px;
                text-align: center;
                width: 100%;
            }

            .right {
                margin-top: 45px;
                padding: 0px 25px ;
            }

            .right .title div{
                font-weight: bold;
                background-color: #3c8dbc;
                color: white;
                padding: 0 6px;
                margin-bottom: 10px;
            }

            .cover img {
                width: 80px;
                height: 80px;
            }
            .line{
                line-height: 25px;
            }

            .item-right{
                margin-top: 20px;
            }
            .intro{
                margin-top: 10px;
            }
        </style>
    </head>
    <body class="white-bg">
        <div class="adds">
            <div>[[${courseDetail.title}]]</div>
            <div style="display: none">[[${courseDetail.host + courseDetail.pptUrl}]]</div>
        </div>
        <div>

            <div class="row">
                <div class="col-sm-12 col-md-8">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" th:each="img,imgStat:${imgList}">
                                <img th:src="${img}">
                            </div>
                        </div>

                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                        <div class="pageNum"><span id="current">1</span>/[[${total}]]</div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-4 right">
                    <div class="line title">
                        <div class="col-sm-12 " style="padding-left: 5px">专家介绍</div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 col-md-4 cover">
                            <img src="/img/avarta.jpg" th:if="${teacher.avarta} eq ''">
                            <img th:src="${teacher.host+teacher.avarta}" src="/img/avarta.jpg"
                                 th:if="${teacher.avarta} ne ''">
                        </div>
                        <div class="col-sm-12 col-md-8 item-right">
                            <div class="row line">
                                <div class="col-sm-12"><span>姓名：</span><span  th:text="${teacher.name}"></span></div>
                            </div>
                            <div class="row line">
                                <div class="col-sm-12"><span>单位：</span> <span th:text="${teacher.organization}"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-12 line intro">
                        <span>&ensp;&ensp;&ensp;&ensp;</span>
                        <span class="txt" th:text="${teacher.introduce}"></span>

                    </div>
                    <div class="col-sm-10 line intro">
                        <div class="row">
<!--                            <span th:onclick="readPPT([[${courseDetail.id}]])" class="btn btn-success btn-lg"><i class="fa fa-file-powerpoint-o"></i> 查看讲义</span>-->
                            <span th:onclick="goExam([[${courseDetail.id}]])" id="btnExam" class="btn btn-primary " ><i class="fa fa-file-text-o"></i> 进入考试</span>
                            <span class="btn btn-warning " style="width:100px;margin-left: 0px" onclick="$.modal.closeTab();">关 闭</span>
                        </div>
                    </div>
                </div>
        </div>


        <th:block th:include="include :: footer"/>
        <th:block th:include="include :: swiper-js"/>
        <script type="text/javascript">

            $('#btnExam').attr('disabled',true)

            var url = '[[${courseDetail.host + courseDetail.pptUrl}]]'
            var total = [[${total}]]
            console.log('total = '+total)
            var canExam = !![[${canExam}]]
            setCanExam(canExam||total==1)
            var mySwiper = new Swiper ('.swiper-container', {
                direction: 'horizontal', // 切换选项
                loop: false, // 循环模式选项

                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                },

                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },

                // 如果需要滚动条
                scrollbar: {
                    el: '.swiper-scrollbar',
                },
                on: {
                    slideChangeTransitionEnd: function(){
                        const current= this.activeIndex+1
                        console.log(current);//切换结束时，告诉我现在是第几个slide

                        $('#current').html(current)
                        if (current == total) {
                            setCanExam(true)
                            let data = {
                                courseDetailId,
                                materialType:'ppt',
                                done:1,
                                progress:current
                            }
                            recordLearningHistory(data)
                        }
                    },
                },
            })

            function goExam(id){

                if ($('#btnExam').attr('disabled')){
                    $.modal.msgError('资料阅读完毕才能进入考试')
                    return false
                }

                const url = ctx + "biz/courseNav/exam/"+id
                $.modal.openTab("课程考试", url);
            }

            function setCanExam(flag){
                $('#btnExam').attr('disabled',!flag)
            }

            function recordLearningHistory(data){
                $.post(ctx+"biz/courseNav/recordLearn",data,function (res){
                    console.log('------recordLearningHistory--------')
                    console.log(res)
                })
            }
        </script>
    </body>
</html>